<template>
    <div class="account_manage">
        <!--权限系统 用户管理-->
        <div class="search">
            <el-form ref="form" :inline="true" :model="form" class="users_search" :rules="rules">
                <el-form-item :label="$t('system.userName')"><!--用户名-->
                    <el-input prefix-icon="el-icon-search" v-model="form.userName" :placeholder="$t('verify.plsInput')" class="inputPhone"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch" icon="search">{{ $t('common.search') }}</el-button>
                </el-form-item>
            </el-form><!--end form-->
            <!--TODO-->
            <!--<el-button @click="addAccountShow" type="primary">新增用户</el-button>-->
        </div>

        <div class="data_list">
            <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
                <el-table-column align="left" label="ID" prop="id">ID</el-table-column>
                <el-table-column align="left" :label="$t('system.userName')" prop="username"><!--用户名--></el-table-column>
                <el-table-column align="left" :label="$t('system.permission')"><!--权限-->
                    <template slot-scope="scope">
                        <el-button @click="bindRole(scope.row)" class="btn" type="text" size="small">{{ $t('system.bindingRole') }}</el-button><!--绑定角色-->
                        <el-button @click="resetPwd(scope.row)" class="btn" type="text" size="small">{{ $t('system.resetPassword') }}</el-button><!--重置密码-->
                        <!--<el-button @click="delAccount(scope.row)" class="btn_red" type="text" size="small">删除</el-button>-->
                    </template>
                </el-table-column>
            </el-table><!--end table-->
        </div>
        <div class="data_page">
            <pagination @pageChange="pageChange" :page="page"><!--分页组件--></pagination>
        </div>

        <!--绑定角色start-->
        <alert-dialog :title="$t('system.bindingRole')" :visible.sync="bindRoleDialogShow" width="600px">
            <el-form class="role_form" :model="roleForm" label-position="top">
                <el-form-item :label="$t('system.userName')"><!--用户名-->
                    <el-input v-model="roleForm.userName" type="text" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item :label="$t('system.userRoleList')"><!--用户角色列表-->
                    <el-checkbox-group v-model="roleForm.roleIds">
                        <el-row>
                            <el-col v-for="role in roleList" :key="role.id" :span="12">
                                <el-checkbox :label="role.id">
                                    <span v-if="role.cnName">{{ role.cnName }}</span>
                                    <span v-else>{{ role.name }}</span>
                                </el-checkbox>
                            </el-col>
                        </el-row>
                        <!--<div v-for="role in roleList"><el-checkbox :label="role.id">{{ role.name }}</el-checkbox></div>-->
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="bindRoleConfirm" type="primary">{{ $t('system.binding') }}</el-button><!--绑定-->
                <el-button @click="bindRoleDialogShow = false" type="default">{{ $t('common.cancel') }}</el-button>
            </div>
        </alert-dialog>
        <!--绑定角色end-->
    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';
    import AlertDialog from '@/components/alert-dialog';

    export default {
        name: 'systemAccount',
        components: {
            Pagination,
            AlertDialog
        },
        mixins: [mixin],
        data() {
            return {
                form: {
                    userName: ''
                },
                rules: {},
                bindRoleDialogShow: false,
                roleForm: {
                    userId: '',
                    userName: '',
                    roleIds: []
                },
                roleList: [],
            };
        },
        methods: {
            getTableData(page = this.page) {
                const params = {
                    username: this.form.userName,
                    pageNum: page.currentPage,
                    pageSize: this.page.pageSize
                };
                this.$api.systemManage.getUserList(params).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && error === '00000000') {
                        this.tableData = data.userList || [];
                        this.page.recordsTotal = data.total;
                        this.page.currentPage = page.currentPage;
                        this.tableMaxHeight = window.document.body.clientHeight - 200;
                    }
                });
            },
            getRoleList(userId) {
                const params = {
                    userId
                };
                this.roleForm.roleIds = [];
                this.$api.systemManage.getRoleList(params).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && error === '00000000') {
                        if (userId) {
                            data.roleList.forEach((item) => {
                                this.roleForm.roleIds.push(item.id);
                            });
                        } else {
                            this.roleList = data.roleList;
                        }
                    }
                });
            },
            onSearch() {
                this.page.currentPage = 1;
                this.getTableData();
            },
            bindRole(row) {
                // 角色绑定
                this.roleForm.userId = row.id;
                this.roleForm.userName = row.username;
                this.bindRoleDialogShow = true;
                this.getRoleList(row.id);
            },
            bindRoleConfirm() {
                const params = {
                    userId: this.roleForm.userId,
                    roleIdList: this.roleForm.roleIds
                };
                this.$api.systemManage.editUserRole(params).then((res) => {
                    const {status, error} = res;
                    if ('1' === status && error === '00000000') {
                        this.bindRoleDialogShow = false;
                        this.$message.success(this.$t('common.successfulOperation'));
                    }
                });
            },
            resetPwd(row) {
                const params = {
                    id: row.id
                };
                this.$confirm(this.$t('system.isResetPassword')).then(() => {/*是否重置密码*/
                    this.$api.systemManage.resetPassword(params).then((res) => {
                        const {status, error} = res;
                        if ('1' === status && error === '00000000') {
                            this.$message.success(this.$t('common.successfulOperation'));
                        }
                    });
                }).catch((e) => {
                    console.log(e);
                });
            },
            // delAccount(row) {
            //   // 删除用户
            //   const params = {
            //     id: row.id
            //   };
            //   this.$confirm('删除后，之前的数据仍会被保留', '是否删除该账户？').then((val) => {
            //     this.$api.systemManage.deleteUser(params).then((res) => {
            //       const { status, data, error, msg } = res;
            //       if ('1' === status && error === '00000000') {
            //         this.$message.success('删除成功');
            //         this.page.currentPage = 1;
            //         this.getTableData();
            //       } else {
            //         this.$message.error(msg);
            //       }
            //     });
            //   }).catch((e) => {
            //     console.log(e);
            //   });
            // },
        },
        created() {
            this.getTableData();
            this.getRoleList();
        }
    };
</script>

<style lang="scss" scoped>
    .inputPhone {
        width: 265px;
    }

    .search {
        background-color: #fff;
        padding: 22px 40px 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .data_list {
        background-color: #fff;
        margin: 16px 24px;
        padding: 10px 16px;
    }

    .btn {
        margin-right: 15px;
    }

    .btn_red {
        border-color: #d9415c;
        color: #d9415c;
    }

    .role_form {
        /*padding: 0 16px;*/
    }

    .account_form_type {
        width: 100%;
    }
</style>
